<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="12">
        <div class="welcome-section">
          <h2 class="title">欢迎来到信息化问题追溯和反馈系统</h2>
          <img src="../assets/images/img.png" alt="欢迎图片" class="content-img">
          <p class="subtitle">这是您进行问题追溯与反馈的得力助手，为您提供高效服务。</p>
          <p class="description">
            本信息化问题追溯和反馈系统自创建之初，便以满足用户对产品或服务问题的精准追溯与及时反馈需求为宗旨。在当今复杂多变的市场环境中，无论是消费者在使用产品时遇到的质量问题，还是企业在运营过程中发现的流程漏洞，都需要一个可靠的系统来进行记录、追踪和解决。对于消费者而言，能够快速准确地追溯问题源头并得到有效的反馈处理，是维护自身权益的重要保障；对于企业来说，及时了解和处理问题，有助于优化产品和服务，提升企业形象和竞争力。
          </p><p class="description">
          为此，我们凭借先进的信息技术和科学的管理理念，精心打造了这套系统。它整合了全面的问题追溯机制和便捷的反馈渠道，从问题的发现、录入，到追溯分析和反馈处理，每个环节都经过了精心设计和严格测试。我们致力于为用户营造一个高效、透明、可信赖的问题处理环境，让问题能够得到及时有效的解决，为用户的生活和工作带来便利。
        </p>
        </div>
<!--        <div class="function-section">-->
<!--          <h2 class="section-title">系统功能</h2>-->
<!--          <div class="function-item">-->
<!--            <h3 class="function-title">问题快速录入</h3>-->
<!--            <p class="function-description">简洁直观的录入界面，支持文字、图片、视频等多种形式的问题描述，方便用户快速准确地记录问题细节。无论是产品外观瑕疵，还是功能异常，都能轻松录入系统。</p>-->
<!--&lt;!&ndash;            <img src="problem_entry_image.jpg" alt="问题录入界面图片" class="content-img">&ndash;&gt;-->
<!--          </div>-->
<!--          <div class="function-item">-->
<!--            <h3 class="function-title">精准问题追溯</h3>-->
<!--            <p class="function-description">系统通过强大的数据分析和追踪技术，能够根据问题录入信息，快速定位问题源头。从产品的生产环节到流通环节，每一个可能的因素都能被准确排查，为问题的解决提供有力依据。</p>-->
<!--&lt;!&ndash;            <img src="problem_trace_image.jpg" alt="问题追溯功能图片" class="content-img">&ndash;&gt;-->
<!--          </div>-->
<!--          <div class="function-item">-->
<!--            <h3 class="function-title">实时反馈查看</h3>-->
<!--            <p class="function-description">用户可以随时查看问题的处理进度和反馈结果，系统会及时推送相关信息，让用户对问题的解决情况了如指掌。同时，用户还可以对反馈结果进行评价，提出进一步的意见和建议。</p>-->
<!--&lt;!&ndash;            <img src="feedback_view_image.jpg" alt="反馈查看界面图片" class="content-img">&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
      </el-col>
      <el-col :sm="12">
        <div class="advantage-section">
          <h2 class="section-title">系统优势</h2>
          <div class="advantage-item">
            <h3 class="advantage-title">快速响应</h3>
            <p class="advantage-description">一旦问题录入系统，系统会立即启动处理流程，相关人员能够在最短时间内获取问题信息并开始处理。高效的响应机制确保问题能够得到及时解决，减少用户的等待时间，提升用户满意度。</p>
            <!--            <img src="security_image.jpg" alt="安全图片" class="content-img">-->
          </div>
          <div class="advantage-item">
            <h3 class="advantage-title">精准追溯</h3>
            <p class="advantage-description">系统依托先进的信息技术，能够对问题进行精准追溯。无论是产品质量问题还是服务流程问题，都能准确找到问题产生的根源，为企业改进产品和服务提供有力支持。例如，在制造业中，通过本系统可以追溯到产品生产过程中的具体环节和责任人，从而采取针对性的措施进行改进。</p>
            <!--            <img src="efficiency_image.jpg" alt="效率图片" class="content-img">-->
          </div>
          <div class="advantage-item">
            <h3 class="advantage-title">有效反馈处理</h3>
            <p class="advantage-description">系统不仅注重问题的追溯，更重视反馈的处理。专业的处理团队会根据问题的性质和用户的需求，制定合理的解决方案，并及时向用户反馈处理结果。同时，系统还会对反馈处理过程进行监督和评估，确保反馈处理的质量和效果。例如，在售后服务中，用户反馈的问题能够得到及时有效的解决，提高了用户对企业的信任和认可。</p>
            <!--            <img src="scalability_image.jpg" alt="可扩展图片" class="content-img">-->
          </div>
        </div>
      </el-col>
    </el-row>
    <p class="closing-statement">
      感谢您选择本信息化问题追溯和反馈系统，我们将竭诚为您服务，助您有效解决问题，维护自身权益。
    </p>
    <p class="version-info">
      <b>当前版本:</b> <span>v{{ version }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.welcome-section,
.function-section,
.advantage-section {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 20px;
  color: #666;
  margin-bottom: 20px;
}

.description {
  font-size: 16px;
  line-height: 1.6;
}

.section-title {
  font-size: 28px;
  margin-bottom: 20px;
}

.function-item,
.advantage-item {
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.function-title,
.advantage-title {
  font-size: 22px;
  margin-bottom: 10px;
}

.function-description,
.advantage-description {
  font-size: 16px;
  line-height: 1.5;
}

.content-img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  border-radius: 5px;
}

.closing-statement {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}

.version-info {
  font-size: 14px;
  text-align: center;
  color: #999;
}
</style>
